<template>
	<view class="viewWallet">
		<navBar isBack backColor="#fff" title="明细" color="#fff" background="transparent"></navBar>
		<view class="dm_topImg">
			<image :src="`${baseImg}/static/distri/makerCenter/bg.png`" mode=""></image>
			<!-- 累计佣金 -->
			<view class="dm_nowRatio">
				{{canPrice}}
				<view class="dm_nowRatioItem">
					<image :src="`${baseImg}/static/distri/fenxiao/withdMoney.png`" mode=""></image>
					总金额（元）
				</view>
			</view>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="selectTime" @click="pickTime">
				<!-- {{year}}年{{month}}月 -->
				{{sta_date}} 至 {{end_date}}
				<image :src="`${baseImg}/static/distri/distriMoney/pullBottom.png`" mode=""></image>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in viewList" :key="index">
					<view class="left">
						余额:{{item.afteramount}}
						<view class="orderText omit-1">订单:{{item.relationsn}}</view>
						<span>{{$utils.getFormatDate(item.create_time*1000,'MM-dd hh:mm')}}</span>
					</view>
					<view class="right" v-if="item.type=='cash_in'">
						+{{item.amount}}元
					</view>
					<view class="right active" v-else>
						<text>-{{item.amount}}元</text>
						<text>{{item.remark}}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
		<!-- <u-picker mode="time" @confirm="pickTimeOk" v-model="showTime" :params="params"></u-picker> -->
		<u-calendar v-model="showTime" mode="data" @change="pickTimeOk"></u-calendar>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				baseImg:this.$static,
				navHeight:200,
				canPrice:0,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showTime:false,
				viewList:[],
				year:new Date().getFullYear(),
				month:new Date().getMonth()+1<10?'0'+(new Date().getMonth()+1):new Date().getMonth()+1,
				page:1,
				pagesize:10,
				sta_date:'',
				end_date:'',
			}
		},
		onLoad(options) {
			let date = new Date()
			this.sta_date = this.$utils.getFormatDate(date,'yyyy-MM-dd')
			this.end_date = this.$utils.getFormatDate(date,'yyyy-MM-dd')
			// this.canPrice = options.canPutPrice
			this.navHeight = 430- Number(this.$store.state.system.navBarHeight)*2
			this.getViewAll()
		},
		onReachBottom() {
			this.page++
			let params = {
				// status:'',
				// year_month:this.year+'-'+this.month,
				sta_date:this.sta_date,
				end_date:this.end_date,
				page:this.page,
				pagesize:this.pagesize
			}
			this.$api.viewAll(params).then(res=>{
				console.log(res,'查看明细')
				if(res.code==1){
					if(!res.data.list.list.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					this.canPrice = res.data.list.income_sum?res.data.list.income_sum:0.00;
					this.viewList = this.viewList.concat(res.data.list.list)
				}
			})
		},
		methods:{
			// 获取明细
			getViewAll(){
				this.page = 1
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					// status:'',
					// year_month:this.year+'-'+this.month,
					sta_date:this.sta_date,
					end_date:this.end_date,
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.viewAll(params).then(res=>{
					console.log(res,'查看明细')
					if(res.code==1){
						if(res.data.list.list.length<10){
							this.statusLoading = 'nomore'
						}
						this.canPrice = res.data.list.income_sum?res.data.list.income_sum:0.00
						this.viewList = res.data.list.list?res.data.list.list:[]
					}
				})
				uni.hideLoading()
			},
			// 时间选择
			pickTime(){
				this.showTime = true
			},
			// 弹框确定
			pickTimeOk(e){
				console.log(e,'时间选择确定')
				// this.year = e.year
				// this.month = e.month
				this.sta_date = e.startDate;
				this.end_date = e.endDate;
				this.getViewAll()
			}
		}
	}
</script>

<style lang="scss">
	.viewWallet{
		.dm_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 累计佣金
		.dm_nowRatio{
			width: 100%;
			position: absolute;
			z-index: 2;
			left: 0;
			padding-left: 28rpx;
			bottom: 60rpx;
			// margin: 78rpx 0 0 32rpx;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.dm_nowRatioItem{
				margin-top: 20rpx;
				display: flex;
				font: 500 30rpx/40rpx PingFang SC;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
		// 时间选择
		.content{
			margin-bottom: 24rpx;
			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.selectTime{
				padding: 28rpx;
				display: flex;
				align-items: center;
				width: 100%;
				background-color: #fff;
				font: 500 30rpx/40rpx PingFang SC;
				color: #0A0605;
				image{
					margin-left: 12rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
			.list{
				width: 702rpx;
				margin: 40rpx auto;
				padding: 12rpx 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 2rpx solid #F4F4F4;
					.left{
						font: 400 28rpx/48rpx PingFang SC;
						color: #333;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						span{
							margin-top: 12rpx;
							font: 400 22rpx/36rpx PingFang SC;
							color: #A0A0A0;
						}
						.orderText{
							width: 450rpx;
						}
					}
					.right{
						width: 200rpx;
						height: 88rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						text-align: center;
						font: 500 22rpx/88rpx PingFang SC;
						color: #FA4E37;
					}
					.active{
						display: flex;
						flex-direction: column;
						justify-content: center;
						color: #333;
						text{
							margin: 5rpx 0;
							line-height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>